<template>
  <div class="search">
    <div class="inp">
      <span class="tubiao iconfont icon-sousuo"></span>
      <input
        type="text"
        placeholder="搜索歌曲,歌手,专辑"
        v-model="value"
        @keydown.enter="EnterSearch(value)"
        @input="chaxun = false"
      />
      <span v-if="deleteqingkong" class="inpdelete" @click="value = ''"
        ><img src="../assets/images/bxr.png"
      /></span>
    </div>
    <div v-if="chaxun == true">
      <div class="searchtext">热门搜索</div>
      <ul class="zujianhost">
        <SsarchHost
          v-for="item in hots"
          :key="item.first"
          :item="item"
          @chuangzhi-sarch="EnterSearch($event)"
        />
      </ul>
      <ul>
        <TodoList
          v-for="todo in historical"
          :key="todo.id"
          :todo="todo"
          @delete-todo="deletetodo"
          @inpup-text="EnterSearch($event)"
        />
      </ul>
    </div>
    <div class="sousuo" v-else-if="chaxun == false">
      <span>搜索"{{ value }}"</span>
      <ul v-if="nowsarch">
        <SearchNowList
          :nowsarch="searc"
          v-for="searc in nowsarch"
          :key="searc.keyword"
          @chuangzhi-sarch="EnterSearch($event)"
        />
      </ul>
    </div>
    <div class="hha" v-else>
      <Loading v-if="queriedlist.length === 0" class="loading" />
      <ul v-else>
        <HotList
          v-for="(item, index) in queriedlist"
          :index="index"
          :key="item.id"
          :item="item"
          :falg="falg"
          :playing="playing"
          :currentPlaySongId="currentPlaySongId"
          @click.native="$emit('update:gedan', queriedlist)"
          @update:current-play-song="$emit('update:current-play-song', $event)"
        />
      </ul>
    </div>
  </div>
</template>

<script>
import SsarchHost from "@/components/SsarchHost.vue";
import TodoList from "@/components/TodoList.vue";
import SearchNowList from "@/components/SearchNowList.vue";
import "../assets/css/iconfont.css";
import Loading from "@/components/Loading.vue";
import HotList from "@/components/HotList.vue";

export default {
  components: {
    SsarchHost,
    TodoList,
    SearchNowList,
    Loading,
    HotList,
  },
  props: ["falg", "playing", "currentPlaySongId"],
  data() {
    return {
      hots: [],
      value: "",
      historical: [ ],
      nowsarch: [],
      chaxun: true,
      queriedlist: [],
      deleteqingkong: false,
    };
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/music/search/hot")
      .then((res) => (this.hots = res.data.result.hots));
    if (window.localStorage.getItem("todolist") !== null) {
      // console.log(123);
      this.historical = JSON.parse(window.localStorage.getItem("todolist"));
    }
  },
  computed: {},
  methods: {
    EnterSearch(v) {
      this.value = v;
      //搜索记录
      let max = Math.max(...this.historical.map((res) => res.id));
      if (max == -Infinity) {
        max = 0;
      }
      this.historical.push({
        id: max + 1,
        text: v,
      });
      var i = Array.from(new Set(this.historical.map((res) => res.text)));
      this.historical = i.map((res, index) => {
        if (res !== undefined) {
          return { id: index + 1, text: res };
        }
      });

      window.localStorage.setItem("todolist", JSON.stringify(this.historical));

      this.chaxun = "查询";
      this.axios
        .get(`https://apis.netstart.cn/music/cloudsearch?keywords=${v}`)
        .then((res) => (this.queriedlist = res.data.result.songs));
    },
    deletetodo(id) {
      //删除默认记录
      this.historical = this.historical.filter((todo) => todo.id !== id);
      window.localStorage.setItem("todolist", JSON.stringify(this.historical));
    },
  },
  watch: {
    value(n) {
      if (n == "") {
        this.chaxun = true;
        this.deleteqingkong = false;
      } else {
        this.deleteqingkong = true;
      }

      if (n !== "") {
        this.axios
          .get(
            `https://apis.netstart.cn/music/search/suggest?keywords=${n}&type=mobile`
          )
          .then((res) => (this.nowsarch = res.data.result.allMatch));
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  .inp {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid gray;
    display: flex;
    justify-content: center;
    position: relative;
    .tubiao {
      position: absolute;
      top: 35%;
      left: 9%;
      z-index: 0;
    }
    input {
      width: 90%;
      opacity: 0.7;
      border: 1px solid white;
      border-radius: 20px;
      padding: 10px;
      outline: none;
      background: #ebecec;
      text-indent: 2em;
      font-size: 15px;
    }
    .inpdelete {
      position: absolute;
      right: 35px;
      top: 20px;
      display: block;
      width: 20px;
      img {
        vertical-align: middle;
      }
    }
  }
  .searchtext {
    font-size: 10px;
    margin: 10px;
  }
  .zujianhost {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 10px;
  }
  .sousuo {
    margin: 10px 10px 10px 0;
    padding-left: 10px;
    color: #507daf;
  }
  .hha {
    .loading {
      margin: calc(100vh / 2) auto;
    }
  }
}
</style>